<!-- 递归渲染多级菜单组件 -->
<template>
  <div>
    <!-- 有子菜单的项 -->
    <el-submenu 
      v-if="menu.children && menu.children.length > 0" 
      :index="menu.menuName"
    >
      <template slot="title">
        <i :class="menu.icon || 'el-icon-menu'"></i>
        <span>{{ menu.menuName }}</span>
      </template>
      <!-- 递归调用自身 -->
      <menu-item 
        v-for="child in menu.children" 
        :key="child.menuId" 
        :menu="child"
      ></menu-item>
    </el-submenu>
    
    <!-- 没有子菜单的项 -->
    <el-menu-item 
      v-else 
      :index="menu.menuPath ? '/main' + menu.menuPath : ''"
    >
      <i :class="menu.icon || 'el-icon-menu'"></i>
      <span slot="title">{{ menu.menuName }}</span>
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  props: {
    menu: Object
  }
};
</script>